import React from 'react';
import { Icon } from 'antd';
import { tagColors } from '@components/tag';
import PropTypes from 'prop-types';
import './index.less';

const ColorBlocks = props => {
  const { selectColor, onClick } = props;

  return (
    <div className="c-color-blocks">
      {tagColors.map(color => {
        return selectColor === color ? (
          <Icon type="check-circle" style={{ color: color }} />
        ) : (
          <i
            key={color}
            style={{ backgroundColor: color }}
            className="color-block"
            onClick={() => onClick(color)}
          />
        );
      })}
    </div>
  );
};

ColorBlocks.propTypes = {
  selectColor: PropTypes.string,
  onClick: PropTypes.func
};

export default ColorBlocks;
